(function () {
  // 步骤3：创建echarts实例
  console.log(document.querySelector(".center1 .right .r1"));
  let myChart1 = echarts.init(document.querySelector(".center1 .right .r1"));
  let myChart2 = echarts.init(document.querySelector(".center1 .right .r2"));
  let myChart3 = echarts.init(document.querySelector(".center1 .right .r3"));

  // 步骤4：定义配置（指定图表的配置项和数据）
  let option1 = {
    // 系列
    series: [
      {
        type: "pie",
        data: [
          {
            value: 30,
            itemStyle: {
              color: "#333843",
            },
          },
          {
            value: 60,
            itemStyle: {
              color: "#6abaf2",
            },
          },
        ],
        // 饼图图形上的文本标签，
        label: {
          show: false,
        },
        // 圆半径
        radius: [30, 40],
        // 起始角度，支持范围[0, 360]。
        startAngle: 200,
      },
    ],
    // 加水印
    graphic: [
      {
        type: "text",
        top: "45%",
        left: "35%",
        style: {
          text: "532",
          fill: "#fff",
          color: "#fff",
          fontSize: 18,
          fontWeight: "bold",
        },
      },
      {
        type: "text",
        top: "60%",
        left: "30%",
        style: {
          text: "占比54%",
          fill: "#A6A8B6",
          fontSize: 10,
          fontWeight: "normal",
        },
      },
    ],
  };
  let option2 = {
    // 系列
    series: [
      {
        type: "pie",
        data: [
          {
            value: 10,
            itemStyle: {
              color: "#333843",
            },
          },
          {
            value: 80,
            itemStyle: {
              color: "yellow",
            },
          },
        ],
        // 饼图图形上的文本标签，
        label: {
          show: false,
        },
        // 圆半径
        radius: [30, 40],
        // 起始角度，支持范围[0, 360]。
        startAngle: 200,
      },
    ],
    // 加水印
    graphic: [
      {
        type: "text",
        top: "45%",
        left: "35%",
        style: {
          text: "532",
          fill: "#fff",
          color: "#fff",
          fontSize: 18,
          fontWeight: "bold",
        },
      },
      {
        type: "text",
        top: "60%",
        left: "30%",
        style: {
          text: "占比36%",
          fill: "#A6A8B6",
          fontSize: 10,
          fontWeight: "normal",
        },
      },
    ],
  };
  let option3 = {
    // 系列
    series: [
      {
        type: "pie",
        data: [
          {
            value: 40,
            itemStyle: {
              color: "#333843",
            },
          },
          {
            value: 90,
            itemStyle: {
              color: "green",
            },
          },
        ],
        // 饼图图形上的文本标签，
        label: {
          show: false,
        },
        // 圆半径
        radius: [30, 40],
        // 起始角度，支持范围[0, 360]。
        startAngle: 200,
      },
    ],
    // 加水印
    graphic: [
      {
        type: "text",
        top: "45%",
        left: "35%",
        style: {
          text: "262",
          fill: "#fff",
          color: "#fff",
          fontSize: 18,
          fontWeight: "bold",
        },
      },
      {
        type: "text",
        top: "60%",
        left: "30%",
        style: {
          text: "占比88%",
          fill: "#A6A8B6",
          fontSize: 10,
          fontWeight: "normal",
        },
      },
    ],
  };

  // 步骤5：使用刚指定的配置项和数据显示图表
  myChart1.setOption(option1);
  myChart2.setOption(option2);
  myChart3.setOption(option3);
  window.addEventListener("resize", function () {
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
  });
})();
